<template>
    <el-form ref="loginRef" :model="loginform" :rules="loginRules">
        <el-form-item prop="username">
            <el-input type="username" class="elinput" size="large" placeholder="email/phone" v-model="loginform.username"
                :prefix-icon="User" />
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" class="elinput" size="large" show-password placeholder="password"
                v-model="loginform.password" :prefix-icon="Lock" />
        </el-form-item>
        <el-form-item>
            <ElButton type="default" class="login-input" @click="login_submit(loginRef)">登录</ElButton>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { LoginReq } from '@/interface/user';
import { User, Lock } from '@element-plus/icons-vue';
import { FormInstance, FormRules } from 'element-plus';
import {useLoginApi} from '@/api/loginApi';

const loginform: LoginReq = reactive({
    username: '',
    password: ''
});
const loginRef = ref<FormInstance>()
const loginRules: FormRules = reactive({
    username: [{ required: true, message: "账号不正确", trigger: 'blur' }],
    password: [{ required: true, message: "密码不正确", trigger: 'blur' }]
})
const login_submit = (formEl: FormInstance | undefined) => {
    console.log(loginform);
    if (!formEl){
        return false;
    }
    formEl.validate((validate: boolean)=> {
        if (validate){
            console.log("准备登录");
            useLoginApi().then((res) => {
                console.log(res);
            }).catch((err)=> {
                console.log(err);
            })
        } else{
            return false;
        }
    })
}

// const loginApi = () => {
//     await axios({
//         method: 'get',
//         url: '/api/login',
//     }).then((res) => {
//         console.log(res);
//     })
// }
</script>

<style scoped>
.elinput {
    margin-top: 30px;
}

.login-input {
    width: 100%;
    padding: 5px;
    margin-top: 20px;
    border-radius: 1px;
    border: 1px solid #ccc;
    font-family: inherit;
}
</style>